<template>
  <div>
    <!-- 
      显示SpuList，不禁用
      其他组件，禁用
     -->
    <CategorySelector :disabled="isShow !== 1" />
    <SpuList v-if="isShow === 1" @setIsShow="setIsShow" @setSpu="setSpu" />
    <SaveOrUpdateSpu
      v-else-if="isShow === 2"
      @setIsShow="setIsShow"
      :spu="spu"
    />
    <SaveSku v-else :spu="spu" />
  </div>
</template>

<script lang="ts">
export default {
  name: "XSpu",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import SpuList from "./components/SpuList.vue";
import SaveSku from "./components/SaveSku.vue";
import SaveOrUpdateSpu from "./components/SaveOrUpdateSpu.vue";
import type { SpuFormData } from "@/api/product/model/spuModel";

enum IsShow {
  "SpuList" = 1,
  "SaveOrUpdateSpu" = 2,
  "SaveSku" = 3,
}

/*
  两个组件切换显示 boolean
  三个或三个组件切换显示 
    1 SpuList
    2 SaveOrUpdateSpu
    3 SaveSku
*/
const isShow = ref<IsShow>(1);

const spu = ref<SpuFormData>({
  spuName: "",
  tmId: undefined,
  description: "",
  spuImageList: [],
  spuSaleAttrList: [],
});

const setSpu = (val: SpuFormData) => {
  spu.value = val;
};

const setIsShow = (val: IsShow) => {
  isShow.value = val;
};
</script>

<style scoped></style>
